<template>
  <div>
        
        <el-button  type="danger" @click="submitForm(ruleFormRef)" :icon="Check" style="float: left;;margin-left: 10px;"  >保存</el-button>&emsp;
        <el-button  type="danger" @click="delDomain" :icon="Back" style="float: left;;margin-left: 10px;">撤销</el-button>&emsp;
  </div>
  <br>
  <hr style="border: 2px;">

   <el-form
      ref="ruleFormRef"
      style="max-width: 600px; "
      :model="form"
      :rules="rules"
      label-width="auto"
      class="demo-ruleForm"
      status-icon
    >
 <el-form-item label="入库日期：" prop="putInDate" >
        <el-date-picker
          v-model="form.putInDate"
          type="date"
          placeholder="Pick a date"
          style="width: 150px"
          disabled
        />
    </el-form-item>

     <el-form-item label="对应出生状态：" prop="brithdayStatusId" >
      <el-select v-model="form.brithdayStatusId" placeholder="对应出生状态" clearable >
        <el-option v-for="item in birthdayStatusDatas" :label="item.brithdayStatus" :value="item.brithdayStatusId" />
      </el-select>
    </el-form-item>
    <span style="color:chocolate;" ><☆☆说明：活羔包括健羔、弱羔、畸形；死羔包括死胎、木乃伊、畸胎☆☆></span>
    <br><br>

    <el-form-item label="对应品种：" prop="breedId" >
      <el-select v-model="form.breedId" placeholder="请选择对应品种" clearable>
        <el-option  v-for="item in breedDatas" :label="item.breedName" :value="item.breedId" />
      </el-select>
    </el-form-item>

      <el-form-item label="添加方式：">
        <el-radio-group v-model="AddColumns1">
          <el-radio :value="true">单个新增</el-radio>
          <el-radio :value="false">批量新增</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="耳号：" prop="earNumber"  v-if="AddColumns1" ><el-input v-model=" form.earNumber"  placeholder="请输入耳号"></el-input></el-form-item>
      
        <el-form-item label="前缀：" prop="prefix"  v-if="!AddColumns1" >
        <el-input v-model="form.prefix" placeholder="请输入前缀" />
      </el-form-item>
      <el-form-item label="开始耳号：" prop="fieldNumber"v-if="!AddColumns1" >
        <el-input v-model="form.fieldNumber" placeholder="请输入开始编号" />
      </el-form-item>
      <el-form-item label="耳号数量：" prop="getNumber"v-if="!AddColumns1">
        <el-input v-model="form.getNumber" placeholder="请输入栏位数量" />
      </el-form-item>
      <el-form-item label="生成耳号："v-if="!AddColumns1">
        {{getStartAdnEnd[2]==0?'--':getStartAdnEnd[0]}}至{{getStartAdnEnd[2]==0?'--':getStartAdnEnd[1] }}
      </el-form-item>
     
    </el-form>


</template>

<script setup lang="ts">
    import {
  Back,
  Check,
  Edit,
  Search,
  Plus,
  Setting,
  SuccessFilled,WarningFilled
} from '@element-plus/icons-vue'
import { reactive, ref, onMounted, computed } from 'vue';
import axios from 'axios';
import { useRoute, useRouter } from 'vue-router';
import type { ComponentSize, FormInstance, FormRules } from 'element-plus';
import { ElMessage, ElMessageBox } from 'element-plus';
//调用持久化
import { useCounterStore } from '@/stores/counter';
const counterStore = useCounterStore();
const route = useRoute();
const router = useRouter();
const ruleFormRef = ref<FormInstance>();
const form = reactive({
  earNumber: '',
  putInDate: new Date(),
  brithdayStatusId: '',
  breedId: '',
  creatId: counterStore.employeeId,
  prefix: '',
  fieldNumber: '',
  getNumber:''
})

const AddColumns1=ref(true)

//非空（验证）
const rules = reactive<FormRules>({
  brithdayStatusId: [{ required: true, message: '对应出生状态不能为空', trigger: 'blur' }],
  breedId: [{ required: true, message: '对应品种不能为空', trigger: 'blur' }],
  earNumber: [{ required: true, message: '耳号不能为空', trigger: 'blur' }],
  prefix: [{ required: true, message: '前缀不能为空', trigger: 'blur' }],
  fieldNumber: [{ required: true, message: '开始编号不能为空', trigger: 'blur' }],
  getNumber: [{ required: true, message: '数量不能为空', trigger: 'blur' }],
  
});


//获取对应品种信息
const breedDatas:any = ref([])
const getBreedDatas = () => {
  axios.get("http://localhost:5039/api/EarsTag/SearchLambBreed").then(res => {
    breedDatas.value=res.data.data
  })
}

//获取对应出生状态信息
const birthdayStatusDatas:any  = ref([])
const getBirthdatStatusDatas= () => {
  axios.get("http://localhost:5039/api/EarsTag/SearchBirthdayStatus").then(res => {
    birthdayStatusDatas.value=res.data.data
  })
}


//计算属性
const getStartAdnEnd = computed(() => {
  var index = Number(form.earNumber) 
  var names = form.prefix.toString();
  var sumNumber =Number(form.getNumber) 
  return [names+index.toString(),names+(sumNumber+index-1).toString(),sumNumber]

})


//撤销按钮
const delDomain = () => {
  form.breedId = '',
    form.brithdayStatusId = '',
  form.prefix= '',
  form.fieldNumber= '',
    form.getNumber = '',
    form.earNumber = ''
  
}

//添加产羔耳标信息
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      var result: any = ref({})
  result.earNumber=form.earNumber 
  result.putInDate=form.putInDate
  result.brithdayStatusId=form.brithdayStatusId 
  result.breedId=form.breedId 
  result.creatId=form.creatId 
  result.prefix=form.prefix 
  result.fieldNumber= Number(form.fieldNumber ) 
  result.getNumber= Number(form.getNumber) 
      axios.post("http://localhost:5039/api/EarsTag/CreateLambEar", result).then(res => {
        if (res.data.code > 0) {
          ElMessage.success("产羔耳标信息添加成功");
        } else {
          ElMessage.error("添加失败了，再试试...")
          return;
        }
      })
    } else {
      console.log('error submit!', fields);
    }
  });
};


//钩子函数
onMounted(() => {
  getBreedDatas();
  getBirthdatStatusDatas()
})



</script>
